import React, { useState } from "react";
import router from "./routers/index";
import { useNavigate, useRoutes } from "react-router-dom";
import { PieChartOutlined } from "@ant-design/icons";
import type { MenuProps } from "antd";
import { Breadcrumb, Layout, Menu } from "antd";
import "./global.less";
const { Header, Content, Footer, Sider } = Layout;

type MenuItem = Required<MenuProps>["items"][number];

function getItem(
  label: React.ReactNode,
  key: React.Key,
  icon?: React.ReactNode,
  children?: MenuItem[]
): MenuItem {
  return {
    key,
    icon,
    children,
    label,
  } as MenuItem;
}

const items: MenuItem[] = router.map((item) => {
  return item.key !== "/"
    ? getItem(item.name, item.key, item?.icon ?? <PieChartOutlined />)
    : null;
});

const App: React.FC = () => {
  const routes = useRoutes(router);
  const [collapsed, setCollapsed] = useState(false);
  const navigate = useNavigate();
  const clickMenu = (menuItem: any): void => {
    console.log("menuItem", menuItem);
    navigate(menuItem.key);
  };

  return (
    <Layout className="layout-container" style={{ minHeight: "100vh" }}>
      <Sider
        collapsible
        collapsed={collapsed}
        onCollapse={(value) => setCollapsed(value)}
      >
        <div
          className="logo"
          style={{
            height: "64px",
            color: "#fff",
            display: "flex",
            justifyContent: "center",
            alignItems: "center",
            lineHeight: "64px",
            fontSize: "20px",
            fontWeight: "600",
          }}
        >
          <div>
            <img
              style={{
                width: "30px",
                marginRight: "10px",
                verticalAlign: "middle",
              }}
              src="https://gw.alipayobjects.com/zos/rmsportal/KDpgvguMpGfqaHPjicRK.svg"
              alt=""
            />
            {collapsed ? <span></span> : <span>click-admin</span>}
          </div>
        </div>
        <Menu
          theme="dark"
          defaultSelectedKeys={["home"]}
          mode="inline"
          items={items}
          onClick={(item) => clickMenu(item)}
        />
      </Sider>
      <Layout className="site-layout">
        <Header className="site-layout-background" style={{ padding: 0 }} />
        <Content style={{ margin: "0 16px" }}>
          {/* <Breadcrumb style={{ margin: "16px 0" }}>
            <Breadcrumb.Item>User</Breadcrumb.Item>
            <Breadcrumb.Item>Bill</Breadcrumb.Item>
          </Breadcrumb> */}
          <div
            className="site-layout-background"
            style={{ padding: 24, minHeight: 360 }}
          >
            {routes}
          </div>
        </Content>
        <Footer style={{ textAlign: "center" }}>
          Ant Design ©2018 Created by Ant UED
        </Footer>
      </Layout>
    </Layout>
  );
};

export default App;
